<template>
  <div class="background" style="position: relative">
    <a-tabs :default-active-key="activeKey" v-model="activeKey" size="large" @change="selectWorkprocdure($event)">
      <a-tab-pane v-for="(item, index) in tabOption" :key="item.key_value" :tab="item.key_name">
        <component ref="childComponentRef" :is="item.component" />
        <!-- <component :ref="'childComponentRef' + item.key_value" :is="item.component" /> -->
      </a-tab-pane>
    </a-tabs>
    <div style="width: 630px; position: absolute;right: 30px; top: 10px">
      <a-row>
        <a-col :span="12">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="公司" prop="company">
            <j-dict-select-tag
              style="width: 220px"
              placeholder="请选择公司"
              v-model="selectQuery.company"
              dictCode="crm_company,name,id"
              @change="changeSearch"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车间" prop="workshop">
            <j-dict-select-tag
              style="width: 100px"
              placeholder="请选择车间"
              v-model="selectQuery.workshop"
              dictCode="workshop"
              @change="changeSearch"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item
            v-if="workprocdureSelected == '1'"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="班次"
            prop="shift"
          >
            <j-dict-select-tag
              style="width: 100px"
              placeholder="请选择班次"
              v-model="selectQuery.shift"
              dictCode="shift"
              @change="changeSearch"
            />
          </a-form-model-item>
          <a-form-model-item
            v-if="workprocdureSelected == '2' || workprocdureSelected == '3'"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="班次"
            prop="shift"
          >
            <j-dict-select-tag
              style="width: 100px"
              placeholder="请选择班次"
              v-model="selectQuery.shift"
              dictCode="shift2"
              @change="changeSearch"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
    <div>
      <a-modal v-model="visible" title="请选择想要看到的排班" :width="900" @ok="handleOk">
        <div>
          <a-form :model="search" label-position="top">
            <a-form-item label="组织">
              <a-radio-group v-model="selectQuery.company">
                <a-space :size="12">
                  <a-radio-button v-for="(item, index) in orgOption" :key="index" :value="item['key_value']">{{
                    item['key_name']
                  }}</a-radio-button>
                </a-space>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="车间">
              <a-radio-group v-model="selectQuery.workshop">
                <a-space :size="22">
                  <a-radio-button v-for="(item, index) in cjOption" :key="index" :value="item['key_value']">{{
                    item['key_name']
                  }}</a-radio-button>
                </a-space>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="工序">
              <a-radio-group v-model="selectQuery.gongxu" @change="workprocdure">
                <a-space :size="22">
                  <a-radio-button v-for="(item, index) in gxOption1" :key="index" :value="item['key_value']">{{
                    item['key_name']
                  }}</a-radio-button>
                </a-space>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="班次">
              <a-radio-group v-model="selectQuery.shift">
                <a-space :size="22">
                  <a-radio-button v-for="(item, index) in bcOption" :key="index" :value="item['key_value']">{{
                    item['key_name']
                  }}</a-radio-button>
                </a-space>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Qinghua from './Qinghua.vue'
import Shumian from './Shumian.vue'
import Jingshu from './Jingshu.vue'
import Bingtiao from './Bingtiao.vue'
import Cusha from './Cusha.vue'
import Xisha from './Xisha.vue'
import Luotong from './Luotong.vue'
import Dabao from './Dabao.vue'
import { getWorkShopOptionData, getPublicData } from '../../../api/customApi'
export default {
  provide() {
    return {
      selectQuery: this.selectQuery
    }
  },
  components: { Qinghua, Shumian, Jingshu, Bingtiao, Cusha, Xisha, Luotong, Dabao },
  data() {
    return {
      orgOption: [
        // { key_value: '1771136798305476610', key_name: '福建新华源纺织有限公司', component: 'lihua' },
        // { key_value: '1771136798305476610', key_name: '福建华源纺织有限公司', component: 'lihua' },
        // { key_value: '1771136798305476610', key_name: '福建新华源纺织有限公司', component: 'lihua' },
        // { key_value: '1771136798305476610', key_name: '福建新华源纺织有限公司', component: 'lihua' },
      ],
      cjOption: [
        // { key_value: '1', key_name: '一纺', component: 'yifang' },
        // { key_value: '2', key_name: '二纺', component: 'erfang' },
        // { key_value: '3', key_name: '三纺', component: 'sanfang' },
        // { key_value: '4', key_name: '四纺', component: 'sifang' },
        // { key_value: '5', key_name: '五纺', component: 'wufang' },
        // { key_value: '6', key_name: '六纺', component: 'liufang' },
      ],
      gxOption1: [
        { key_value: '1', key_name: '前纺', component: 'Qianfang' },
        { key_value: '2', key_name: '细纱', component: 'Xisha' },
        { key_value: '3', key_name: '络筒', component: 'Luotong' }
      ],
      bcOption: [
        // { key_value: '1', key_name: '甲班', component: 'jiaban' },
        // { key_value: '2', key_name: '乙班', component: 'yiban' },
        // { key_value: '3', key_name: '丙班', component: 'bingban' }
      ],
      search: {
        org: '',
        cj: '',
        gongxu: '',
        bc: ''
      },
      visible: false,
      selectQuery: {
        workshop: '5',
        shift: '1',
        company: '1771136798305476610',
        gongxu: '2'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      tabOption: [
        { key_value: '1', key_name: '前纺', component: 'Qinghua' },
        /*        { key_value: '2', key_name: '梳棉', component: 'Shumian' },
        { key_value: '3', key_name: '精梳', component: 'Jingshu' },
        { key_value: '4', key_name: '并条', component: 'Bingtiao' },
        { key_value: '5', key_name: '粗纱', component: 'Cusha' },*/
        { key_value: '2', key_name: '细纱', component: 'Xisha' },
        { key_value: '3', key_name: '络筒', component: 'Luotong' }
        /*{ key_value: '8', key_name: '打包', component: 'Dabao' }*/
      ],
      importVisible: false,
      activeKey: '2',
      activeChangeKey: '2',
      workprocdureSelected: '2'
    }
  },
  mounted() {
    // this.showModaltanchuang()
    // this.getWorkShopOption()
    // this.getUnitOption()
    // this.getCompanyData()
  },
  methods: {
    getWorkShopOption() {
      getWorkShopOptionData({ dictId: '1773939142856417281' }).then(res => {
        res.result.records.forEach(item => {
          this.cjOption.push({
            key_value: item.itemValue,
            key_name: item.itemText
          })
        })
      })
    },
    getUnitOption() {
      getWorkShopOptionData({ dictId: '1772622847011680257' }).then(res => {
        res.result.records.forEach(item => {
          this.bcOption.push({
            key_value: item.itemValue,
            key_name: item.itemText
          })
        })
      })
    },
    getCompanyData() {
      getPublicData('sys/dict/getDictItems/crm_company,name,id').then(res => {
        res.result.forEach(item => {
          this.orgOption.push({
            key_value: item.value,
            key_name: item.text
          })
        })
      })
    },
    showModaltanchuang() {
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
      this.activeKey = this.activeChangeKey

      // 获取对子组件的引用
      const childComponent = this.$refs.childComponentRef

      // 调用子组件的查询方法
      childComponent.handleSearch()
    },
    changeSearch() {
      let refNames = {
        '1': 'qinghuaModal',
        '2': 'xishaModal',
        '3': 'luotongModal'
      }
      // 根据 selectedValue 找到对应的 ref 名称
      let refName = refNames[this.workprocdureSelected]

      for (let i = 0; i < this.$refs.childComponentRef.length; i++) {
        if (this.$refs.childComponentRef[i].$refs.hasOwnProperty(refName)) {
          this.$refs.childComponentRef[i].handleSearch()
          return
        }
      }
    },
    workprocdure(val) {
      console.log(val)
      this.activeChangeKey = val.target.value
      console.log(this.activeKey)
    },
    selectWorkprocdure(e) {
      this.changeSearch()
      this.workprocdureSelected = e
    }
  }
}
</script>

<style>
.background {
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.05);
}
</style>
